<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>伪类选择器</title>
		<style>
			/* 伪类选择器: 语法: 选择器: hover 悬停之后改变效果*/
			h1:hover{
				color: #e4393c;
			}
			
			/* 练习: 生成200px*200px正方形  默认红色 鼠标悬停后 调整黄色*/
			.square{
				width: 200px;
				height: 200px;
				background: red;
			}
			.square:hover{
				background: yellow;
			}
			
			/* 超连接4种状态 */
			/* 1. 超链接未点击时 伪类选择器:link*/
			a:link{
				color: red;
				/* 下划线 */
				text-decoration: none;
			}
			/* 2. 点击后超链接 伪类选择器 :visited */
			a:visited{
				color: blue;
			}
			/* 3. 悬停超链接状态  伪类选择器 :hover */
			a:hover{
				color: yellow;
			}
			/* 4. 点击跳转时状态 伪类选择器  :active*/
			a:active{
				font-size: 50px;
			}
			/* :focus  伪类选择器针对input元素 鼠标点击输入框的时候的状态 */
			input:focus{
				background: #e4393c;
			}
			li:first-child{
				color: #8c69e4;
			}
			li:last-child{
				color: #ffaee3;
			}
			li:nth-child(3){
				color: #3a65ff;
			}
			li:nth-child(4){
				color: #ffaa7f;
			}
			li:nth-child(2){
				color: #fff7ef;
			}
			
		</style>
	</head>
	<body>
		
		<!-- 列表: 伪类选择器: first-child last-child nth-child(n)  -->
		<ul>
			<li>优香</li>
			<li>诺亚</li>
			<li>爱丽丝</li>
			<li>玛丽</li>
			<li>小雪</li>
		</ul>
		
		<!-- 表单: 伪类选择器    :focus -->
		<input type="text" />
		
		<hr />
		<h1>悬停效果</h1>
		<div class="square"></div>
		<h1>针对超链接了解四种状态</h1>
		<a href="#">超链接1</a>
		<a href="#">超链接2</a>
	</body>
</html>